<!--
* @description 平台报表
* @author zywu
* @date 2021/01/09 10:33:04
!-->
<template>
  <div class="wrapper-platform-report">
    <div class="page page-weekly">
      <div class="link-page-top">
        <div class="link-page-title" id="weeklyTitle">{{orgName}}</div>
        <div class="link-top-btns">
          <img
            v-if="showShareBtn"
            src="../../assets/img/report/share.png"
            style="margin-right:15px;"
            id="sharePageBtn"
            @click="handleShare"
          />
          <audio-player :src="reportData.reportDesc"></audio-player>
        </div>
        <div class="link-date" id="weeklyTime">
          <span v-if="period==2">{{year}}年{{month}}月</span>
          <span v-else-if="period==5">{{year}}年第{{qaurter}}季度</span>
        </div>
      </div>
      <div class="page-content" style="overflow-y: auto;">
        <!-- 一{{periodName}}安全态势 -->
        <safe-trend
          v-if="reportData.securitySituation"
          :report-data="reportData"
          :period="period"
          :period-name="periodName"
        ></safe-trend>

        <!-- 本{{periodName}}危险排行榜前五 -->
        <top-danger v-if="reportData.dangerTop5" :report-data="reportData" :period="period" :period-name="periodName"></top-danger>

        <!-- 高危信号回顾 -->
        <danger-signal
          v-if="reportData.highRiskSignal"
          :report-data="reportData"
          :period="period"
          :period-name="periodName"
        ></danger-signal>

        <!-- 重大问题回顾 -->
        <important-trouble
          v-if="reportData.majorIssuesProportion"
          :report-data="reportData"
          :period="period"
          :period-name="periodName"
        ></important-trouble>

        <!-- 隐患整改回顾 -->
        <hidden-danger
          v-if="reportData.hiddenDangerReform"
          :report-data="reportData"
          :period="period"
          :period-name="periodName"
        ></hidden-danger>

        <!-- 消控室值守回顾 -->
        <control-room
          v-if="controlRoomData||reportData.controlRoom"
          :report-data="reportData"
          :period="period"
          :period-name="periodName"
        ></control-room>

        <!-- 消防通道监测回顾 -->
        <safe-passage v-if="safePassageData" :report-data="safePassageData" :period="period" :period-name="periodName"></safe-passage>

        <!-- 电瓶车上楼回顾 -->
        <electric-mobile
          v-if="electricMobileData"
          :report-data="electricMobileData"
          :period="period"
          :period-name="periodName"
        ></electric-mobile>

        <!-- 煤气罐上楼回顾 -->
        <gas-tank v-if="gasTankData" :report-data="gasTankData" :period="period" :period-name="periodName"></gas-tank>
      </div>
    </div>
  </div>
</template>

<script>
import { loadEcharts } from '@/utils/loadEcharts'
import { getPlatFormYearReport } from '@/api/yearReport'
import AudioPlayer from '../../components/AudioPlayer.vue'
import '@/styles/report-platform.scss'
import SafeTrend from './SafeTrend.vue'
import TopDanger from './TopDanger.vue'
import DangerSignal from './DangerSignal.vue'
import ImportantTrouble from './ImportantTrouble.vue'
import HiddenDanger from './HiddenDanger.vue'
import SafePassage from './SafePassage.vue'
import ElectricMobile from './ElectricMobile.vue'
import GasTank from './GasTank.vue'
import ControlRoom from './ControlRoom.vue'
const reportData = require('@/mock/reportPlatform.json')
export default {
  data() {
    return {
      isPlay: false,
      isresume: false,
      reportData: {},
      orgName: '',
      showShareBtn: true,
      period: '5', //2月报，5季报
      year: '',
      month: '',
      qaurter: '',

      electricMobileData: '',
      gasTankData: '',
      safePassageData: '',
      controlRoomData: '',
    }
  },

  components: {
    AudioPlayer,
    SafeTrend,
    TopDanger,
    DangerSignal,
    ImportantTrouble,
    HiddenDanger,
    SafePassage,
    ElectricMobile,
    GasTank,
    ControlRoom,
  },

  computed: {},

  created() {
    this.reportId = this.$route.query.reportId || 10622
    this.period = this.$route.query.period || 2
    this.periodName = this.period == 2 ? '月' : '季度'
    if (
      !/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) &&
      !/(Android)/i.test(navigator.userAgent)
    ) {
      this.showShareBtn = false
    }
    loadEcharts().then(() => {
      this.getData()
    })
  },

  mounted() {},

  methods: {
    handleShare() {
      let url = document.location.href
      let shareTitle = this.orgName
      let shareContent = ''
      if (this.period == 3) {
        shareContent = `${this.year}年第${this.qaurter}季度消防报表`
      } else if (this.period == 2) {
        shareContent = `${this.year}年${this.month}月消防报表`
      }
      parent.native.shareReport(
        decodeURIComponent(url),
        shareTitle,
        shareContent
      )
    },
    setData(data) {
      this.orgName = data.orgName
      this.reportData = data
      this.getMonthOrQaurter(data.startDate)

      if (data.aiResult) {
        for (let i in data.aiResult) {
          if (data.aiResult[i].code === 'electricBicycleUse') {
            this.electricMobileData = data.aiResult[i] /* 电瓶车上楼 */
          } else if (data.aiResult[i].code === 'gasCanistersUse') {
            this.gasTankData = data.aiResult[i] /* 煤气罐上楼 */
          } else if (data.aiResult[i].code === 'fireEscapeUse') {
            this.safePassageData = data.aiResult[i] /* 消防通道监测回顾 */
          } else if (data.aiResult[i].code === 'controlRoomUse') {
            this.controlRoomData = data.aiResult[i] /* 无人值守分析 */
            this.reportData.controlRoomData = this.controlRoomData
          }
        }
      }

      console.log(data)
    },
    getData() {
      if (!this.reportId) {
        this.setData(reportData)
        return
      }
      getPlatFormYearReport({
        id: this.reportId,
      }).then((res) => {
        let data = JSON.parse(JSON.parse(this.xxbubs(res.data)))
        this.setData(data)
      })
    },
    xxbubs(str) {
      str = str.replace('f6ae12c1671b4ce48c3f90e9dd9d7608', '')
      return decodeURIComponent(
        atob(str)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
          })
          .join('')
      )
    },
    getMonthOrQaurter(date) {
      let arr = date.split('-')
      this.year = arr[0]
      this.month = arr[1]
      this.qaurter = ['一', '二', '三', '四'][Math.ceil(this.month / 3) - 1]
    },
  },
}
</script>